<template>
  <div class="app-contain">
    <head-top></head-top>
    <div class="bg-fa of uc-m-sign-box">
      <div class="container" v-loading="loading">
        <div class="i-box clearfix pr of mt10 m-video-box">
          <article class="c-v-pic-wrap">
            <section id="videoPlay" class="p-h-video-box pr">
              <img class="dis c-v-pic" :src="domain+courseInfo.image">
              <section class="c-cou-mask"></section>
              <h3 class="hLh30 of unFw cou-title txtOf">
                <font class="c-fff fsize14 f-fM">{{courseInfo.name}}</font>
              </h3>
              <a
                class="v-play-btn"
                :title="courseInfo.name"
                href="javascript:void(0)"
                @click="playVideo(0)"
                v-show="courseType == 'COURSE'"
              >
                <em></em>
              </a>
              <a
                class="v-play-btn"
                :title="courseInfo.name"
                href="javascript:void(0)"
                @click="playVideo(0)"
                v-show="courseType == 'LIVE'"
              >
                <em></em>
              </a>
            </section>
          </article>
          <article class="c-a-wrap cou-a-wrap pc-box-show">
            <div class="c-attr-box">
              <h3 class="unFw mt10 pc-box-show plan-attr-title">
                <font class="c-333 f-fM" :title="courseInfo.name">{{courseInfo.name}}</font>
              </h3>
              <div class="mt25 c-attr-desc pc-box-show">
                <p class="c-666 fsize16">{{courseInfo.description}}</p>
              </div>
              <div class="mt25 pc-box-show">
                <span class="cou-nav-type">{{courseInfo.subjectName}}</span>
                <span class="fsize18 c-666 ml25">
                  时长：
                  <span class="c-master">{{courseInfo.minutes}}分钟</span>
                </span>
                <span class="fsize18 c-666 ml25">
                  学分：
                  <span class="c-master">{{courseInfo.credit}}</span>
                </span>
              </div>
              <div
                class="mt30 clearfix of"
                v-if="courseInfo.type == 'LIVE'&&courseInfo.filetype == 'AUDIO'"
              >
                <div class="learn-btn open-c-btn">
                  <a
                    href="javascript:void(0)"
                    @click="lookApp"
                    title="仅支持手机端观看"
                    class="bm-lr-btn"
                    style="font-size:14px; background:#909399;"
                  >仅支持手机端观看</a>
                </div>
              </div>
              <div class="mt30 clearfix of" v-else>
                <div class="learn-btn open-c-btn" v-show="!courseAuth.look">
                  <a
                    href="javascript:void(0)"
                    @click="joinStudy"
                    title="加入学习"
                    class="bm-lr-btn"
                  >加入学习</a>
                </div>

                <div class="learn-btn open-c-btn" v-show="courseAuth.look&&courseType == 'COURSE'">
                  <a
                    href="javascript:void(0)"
                    @click="playVideo(0)"
                    title="立即观看"
                    class="bm-lr-btn"
                  >立即观看</a>
                  <a
                    href="javascript:void(0)"
                    @click="joinExam"
                    title="进入考试"
                    class="bm-lr-btn"
                    v-show="courseInfo.paperId&&!courseRecord.examStatus"
                  >进入考试</a>
                  <a
                    href="javascript:void(0)"
                    @click="lookTest"
                    title="查看成绩"
                    class="bm-lr-btn"
                    v-show="courseInfo.paperId&&courseRecord.examStatus"
                  >查看成绩</a>
                </div>
                <div
                  class="learn-btn open-c-btn"
                  v-show="courseAuth.look&&!fileurl&&courseType == 'LIVE'"
                >
                  <a
                    href="javascript:void(0)"
                    @click="playVideo(0)"
                    title="进入直播"
                    class="bm-lr-btn"
                  >进入直播</a>
                </div>
                <div
                  class="learn-btn open-c-btn"
                  v-show="courseAuth.look&&fileurl&&courseType == 'LIVE'"
                >
                  <a
                    href="javascript:void(0)"
                    @click="playVideo(0)"
                    title="查看回放"
                    class="bm-lr-btn"
                  >查看回放</a>
                </div>
              </div>
            </div>
          </article>
        </div>
        <div class="mt20 mb20">
          <div class="clearfix">
            <div class="fl col-75">
              <div class="mr20 c-module-box">
                <div class="c-title-box open-cou-nav">
                  <ol class="js-tap clearfix">
                    <li
                      :class="navigationType=='info'?'current':''"
                      lang="info"
                      @click="changeType('info')"
                    >
                      <a href="javascript:void(0)" title="课程介绍">课程介绍</a>
                    </li>
                    <li
                      :class="navigationType == 'catalog'?'current':''"
                      lang="catalog"
                      @click="changeType('catalog')"
                    >
                      <a href="javascript:void(0)" title="课程目录">课程目录</a>
                    </li>
                    <li
                      :class="navigationType == 'answer'?'current':''"
                      lang="answer"
                      @click="changeType('answer')"
                    >
                      <a href="javascript:void(0)" title="课程评论">课程评论</a>
                    </li>
                  </ol>
                </div>
                <div class="cou-intro-wrap">
                  <div class="i-c-box publicClass" v-show="navigationType == 'info'">
                    <div class="i-q-t3 of" v-html="courseInfo.info"></div>
                  </div>
                  <div class="i-c-box publicClass chapter-box" v-show="navigationType == 'catalog'">
                    <div class="cou-info-menu" v-for="item in courseInfo.courseChapters">
                      <div class="chapter-name txtOf tal">
                        <em class="vam chapter-icon"></em>
                        <span class="ml10 vam">{{item.name}}</span>
                      </div>
                      <div class="chap-seclist pr">
                        <ul>
                          <li
                            v-for="childItem in item.children"
                            class="tal"
                            @click="playVideo(childItem.id)"
                            v-show="courseType == 'COURSE'"
                          >
                            <div class="c-p-wrap">
                              <a
                                href="javascript:void(0)"
                                class="c-p-title play-icon-box txtOf"
                                :class="[{'audio-icon-box':(childItem.filetype == 'AUDIO')}]"
                              >
                                <em class="icon16 ml5 vam"></em>
                                <span class="ml15 vam">{{childItem.name}}</span>
                                <small class="vam F-fM c-999 f-fM">({{childItem.minutes}}分)</small>
                                <div class="fr" v-if="userInfo">
                                  <span class="fr" v-show="childItem.viewStatus">已看完</span>
                                  <span class="fr" v-show="!childItem.viewStatus">未看完</span>
                                </div>
                              </a>
                            </div>
                          </li>
                          <li
                            v-for="childItem in item.children"
                            class="tal"
                            @click="playVideo(childItem.fileurl)"
                            v-show="courseType == 'LIVE'"
                          >
                            <div class="c-p-wrap">
                              <a
                                href="javascript:void(0)"
                                class="c-p-title play-icon-box txtOf"
                                :class="[{'audio-icon-box':(childItem.filetype == 'AUDIO')}]"
                              >
                                <em class="icon16 ml5 vam"></em>
                                <span class="ml15 vam">{{childItem.name}}</span>
                                <small
                                  class="vam F-fM c-999 f-fM"
                                >({{getHourMinute(childItem.liveStart,'day')}} {{getHourMinute(childItem.liveStart,'hour')}}-{{getHourMinute(childItem.liveEnd,'hour')}})</small>
                                <span class="fr" v-show="childItem.liveStatus == 1">已结束</span>
                                <span class="fr" v-show="childItem.liveStatus == 2">正在直播</span>
                                <span class="fr" v-show="childItem.liveStatus == 3">未开始</span>
                              </a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="i-c-box publicClass" v-show="navigationType == 'answer'">
                    <section class="lh-bj-list pr replyhtml cou-remark-box">
                      <ul>
                        <li class="unBr">
                          <div class="of">
                            <section class="n-reply-wrap">
                              <textarea
                                id="dyId"
                                maxlength="225"
                                placeholder="输入您的评论"
                                v-model="commentInfo"
                              ></textarea>
                              <p class="of mt5 tar pl5 pr5">
                                <span class="fl" style="display: none;">
                                  <em class="icon12 msg-e-icon"></em>
                                  <tt class="c-red com-err-info vam ml5"></tt>
                                </span>
                                <span class="c-999 fsize14">还可以输入
                                  <tt class="c-red">{{commentLength}}</tt>字
                                </span>
                                <a
                                  class="lh-reply-btn ml15"
                                  title="评论"
                                  href="javascript:void(0)"
                                  @click="addReview"
                                >评论</a>
                              </p>
                            </section>
                          </div>
                        </li>
                      </ul>
                    </section>
                    <div class="mt40 c-review-title">
                      <span class="fsize18 c-333">课程评论</span>
                    </div>
                    <section class="review-box mt15">
                      <ul>
                        <li v-show="assessList.length<1">
                          <section class="mt30 mb30 tac">
                            <em class="no-data-ico cTipsIco">&nbsp;</em>
                            <span class="c-666 fsize14 ml10 vam">还没有评论，快来抢沙发~</span>
                          </section>
                        </li>
                        <li class="pr replyCount" v-for="item in assessList">
                          <aside class="noter-pic">
                            <img width="50" height="50" :src="item.user.avatar" class="picImg">
                          </aside>
                          <div class="of reply-p-info">
                            <span class="fl">
                              <font class="fsize16 c-666 txtOf">{{item.user.nickname}}</font>
                            </span>
                            <span class="fr c-666 fsize12">
                              <font>{{item.createtime}}</font>
                            </span>
                          </div>

                          <div class="noter-txt mt5">
                            <p>{{item.info}}</p>
                          </div>
                          <div class="tar">
                            <a
                              href="javascript:void(0)"
                              class="c-666 fsize14"
                              title="回复"
                              @click="showReply = item.id"
                            >
                              <em class="icon18 c-reply"></em>
                              <span class="c-999 fsize12 vam">{{item.courseAssessList.length}}</span>
                            </a>
                          </div>
                          <div
                            class="n-reply mt5 c-reply-box"
                            id="rePrlblemId214"
                            v-show="showReply == item.id"
                          >
                            <div id="reply214">
                              <section class="n-reply-wrap">
                                <fieldset>
                                  <textarea
                                    class
                                    maxlength="255"
                                    name
                                    id="reProblemInfo214"
                                    v-model="replyInfo"
                                  ></textarea>
                                </fieldset>
                                <p class="of mt5 tar pl5 pr5">
                                  <span class="c-999 fsize14">还可以输入
                                    <tt class="c-red" id="word214">{{replyLength}}</tt>字
                                  </span>
                                  <a
                                    class="lh-reply-btn ml15"
                                    title="回复"
                                    href="javascript:void(0)"
                                    id="addReProblemFun214"
                                    @click="reply(item.id)"
                                  >回复</a>
                                </p>
                              </section>
                              <div class="mt10 reply-list">
                                <section class="review-box mt15">
                                  <ul>
                                    <li class="pr" v-for="childItem in item.courseAssessList">
                                      <div class="of">
                                        <span class="fl">
                                          <font class="fsize16 c-666">{{childItem.user.nickname}}</font>
                                        </span>
                                        <span class="fr c-666 fsize12">
                                          <font>{{childItem.createtime}}</font>
                                        </span>
                                      </div>
                                      <div class="noter-txt mt5">
                                        <p>{{childItem.info}}</p>
                                      </div>
                                    </li>
                                  </ul>
                                </section>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                      <div class="page-mar-top tac" style="margin-top: 30px;">
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :current-page="currentPage"
                          :page-count="totalPageSize"
                          :total="totalResultSize"
                          @current-change="currentChange"
                        ></el-pagination>
                      </div>
                    </section>
                  </div>
                  <div class="i-c-box publicClass"></div>
                </div>
              </div>
            </div>
            <div class="fr col-25 mt-20">
              <teacher :teacher-list="courseInfo.teacherList" :domain="domain"></teacher>
            </div>
          </div>
        </div>
      </div>
    </div>

    <login-popup :showLogin="showLoginModel" @closeDiag="closeDiag"></login-popup>
    <foot-bootom></foot-bootom>
  </div>
</template>

<script>
import { Message, MessageBox, Notification } from "element-ui";
import loginPopup from "@/components/loginPopup/index";
import { domainUrl } from "@/utils/index";
import headTop from "@/components/header/header";
import footBootom from "@/components/footer/index";
import teacher from "@/components/course/teacher";
import {
  getCourseInfo,
  getAssessList,
  insertAssess,
  joinCourse
} from "@/api/course";
export default {
  components: {
    //引入组件
    headTop,
    footBootom,
    loginPopup,
    teacher
  },
  name: "courseInfo",
  data() {
    return {
      loading: true,
      courseInfo: {},
      courseAuth: {}, //是否可以观看
      courseRecord: {},
      navigationType: "info",
      currentPage: 1,
      totalPageSize: 1,
      totalResultSize: 1,
      commentInfo: "", //评论内容
      commentLength: 225,
      showLoginModel: false,
      assessList: [],
      showReply: "",
      replyInfo: "",
      replyLength: 225,
      domain: "",
      courseType: "", //区别直播或点播
      fileurl: "" //第一节直播回放ID
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.getStorageInfo;
    }
  },
  watch: {
    commentInfo: function(curVal, oldVal) {
      this.commentLength = 225 - curVal.length;
    },
    replyInfo: function(curVal, oldVal) {
      this.replyLength = 225 - curVal.length;
    },
    userInfo: function(curVal, oldVal) {
      //登录成功后重新请求页面信息
      if (curVal) {
        this.getCourseInfo(this.courseInfo.id, curVal.id);
      }
    }
  },
  created() {
    let query = this.$route.query;
    let userId = 0;
    if (this.userInfo) {
      userId = this.userInfo.id;
    }
    this.courseType = query.type;
    this.domain = domainUrl();
    this.getCourseInfo(query.id, userId);
    this.getAssessList({
      courseId: query.id,
      currentPage: 1
    });
  },
  methods: {
    getHourMinute(dates, type) {
      let newDate = new Date(dates);
      if (type == "hour") {
        let hours =
          newDate.getHours() < 10
            ? "0" + newDate.getHours()
            : newDate.getHours();
        let minutes =
          newDate.getMinutes() < 10
            ? "0" + newDate.getMinutes()
            : newDate.getMinutes();
        return hours + ":" + minutes;
      } else {
        let month = newDate.getMonth() + 1;
        let days = newDate.getDate();
        return month + "月" + days + "日";
      }
    },
    closeDiag(val) {
      //子组件分发关闭事件
      this.showLoginModel = val;
    },
    getAssessList(page) {
      getAssessList(page).then(res => {
        let data = res.entity.data;
        this.assessList = [];
        if (data.length > 0) {
          data.forEach(item => {
            if (item.user) {
              if (!item.user.avatar) {
                item.user["avatar"] =
                  "";
              } else {
                item.user["avatar"] = domainUrl() + item.user.avatar;
              }
              if (!item.user.nickname) {
                item.user["nickname"] = "游客";
              }
              this.assessList.push(item);
            }
          });
          this.totalPageSize = res.entity.page.totalPageSize;
          this.totalResultSize = res.entity.page.totalResultSize;
        }
      });
    },
    getCourseInfo(id, userId) {
      getCourseInfo(id, userId).then(res => {
        let data = res.entity;
        this.courseInfo = data.course;
        this.courseAuth = data.courseAuth;
        if (data.courseRecord) {
          this.courseRecord = data.courseRecord;
        }
        if (
          this.courseType == "LIVE" &&
          data.course.courseChapters.length > 0
        ) {
          this.fileurl = data.course.courseChapters[0].children[0].fileurl;
        }
        this.loading = false;
      });
    },
    insertAssess(page) {
      //提交评论
      insertAssess(page).then(res => {
        this.getAssessList({
          courseId: this.courseInfo.id,
          currentPage: 1
        });
        this.commentInfo = "";
        this.replyInfo = "";
      });
    },
    changeType(val) {
      this.navigationType = val;
    },
    addReview() {
      if (this.userInfo) {
        let data = {
          chapterId: 0,
          courseId: this.courseInfo.id,
          info: "",
          userId: this.userInfo.id
        };
        if (this.commentInfo !== "") {
          data.info = this.commentInfo;
          this.insertAssess(data);
        } else {
          Notification.warning({
            title: "提示",
            message: "请输入评论内容",
            position: "top-left"
          });
        }
      } else {
        this.showLoginModel = true;
      }
    },
    reply(id) {
      //回复
      if (this.userInfo) {
        let data = {
          chapterId: 0,
          courseId: this.courseInfo.id,
          info: "",
          userId: this.userInfo.id
        };
        data["replyId"] = id;
        if (this.replyInfo !== "") {
          data.info = this.replyInfo;
          this.insertAssess(data);
        } else {
          Notification.warning({
            title: "提示",
            message: "请输入评论内容",
            position: "top-left"
          });
        }
      } else {
        this.showLoginModel = true;
      }
    },
    joinStudy() {
      if (this.userInfo) {
        let data = {
          courseId: this.courseInfo.id,
          userId: this.userInfo.id
        };
        if (this.courseType == "COURSE") {
          data["type"] = "COURSE";
        } else {
          data["type"] = "LIVE";
        }
        joinCourse(data).then(res => {
          Notification.success({
            title: "提示",
            message: "加入成功",
            position: "top-left"
          });

          this.getCourseInfo(this.courseInfo.id, this.userInfo.id);
        });
      } else {
        this.showLoginModel = true;
      }
    },
    playVideo(val) {
		 if ( this.courseInfo.type == "LIVE" && this.courseInfo.filetype == "AUDIO") {
          Notification({
            title: "提示",
            message: "直播语音课程仅支持移动端观看，如需观看请去下载APP",
            duration: 3000
		  });
		  return;
        }

      if (this.userInfo) {
        if (this.courseAuth.look) {
          if (this.courseType == "COURSE") {
            this.lookCourse(val);
          } else {
            this.fileurl = val;
            this.lookLive();
          }
        } else {
          Notification.warning({
            title: "提示",
            message: "请先加入学习",
            position: "top-left"
          });
        }
      } else {
        this.showLoginModel = true;
      }
    },
    lookCourse(val) {
      if (this.courseInfo.filetype == "VIDEO") {
        this.$router.push({
          path: "/playing",
          query: {
            id: this.courseInfo.id,
            playId: val
          }
        });
      } else {
        this.$router.push({
          path: "/listening",
          query: {
            id: this.courseInfo.id,
            playId: val
          }
        });
      }
    },
    lookLive() {
      let query = {
        roomCode: this.courseInfo.roomCode,
        roomId: this.courseInfo.roomId,
        type: "playing"
      };
      if (this.fileurl) {
        query["recordid"] = this.fileurl;
        query["type"] = "playback";
      }
      this.$router.push({
        path: "/liveRoom",
        query: query
      });
    },
    lookApp() {
      Notification({
        title: "提示",
        message: "直播语音课程仅支持移动端观看，如需观看请去下载APP",
        duration: 3000
      });
    },
    joinExam() {
      this.$router.push({
        path: "/exam",
        query: {
          courseId: this.courseInfo.id,
          paperId: this.courseInfo.paperId,
          name: this.courseInfo.name,
          type: "COURSE"
        }
      });
    },
    lookTest() {
      this.$router.push({
        path: "/paperResults",
        query: {
          examId: this.courseInfo.id,
          type: "COURSE"
        }
      });
    },
    currentChange(val) {
      this.currentPage = val;
      this.getAssessList({
        courseId: this.courseInfo.id,
        currentPage: this.currentPage
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/style/mixin";

.m-video-box {
  padding: 25px 38px;
}

.c-v-pic-wrap {
  float: left;
  transition: all 0.3s ease 0s;
  margin-right: 40px;
  .p-h-video-box {
    width: 660px;
    height: 380px;
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    .c-v-pic {
      width: 100%;
      height: 100%;
    }
  }
}

.v-play-btn {
  left: 50%;
  margin: -50px 0 0 -50px;
  position: absolute;
  top: 50%;
  z-index: 9;
  em {
    height: 100px;
    width: 100px;
  }
  &:hover,
  &:hover em {
    opacity: 0.9;
    text-decoration: none;
  }
}

.cou-nav-type {
  border: 1px solid $themeColor;
  color: $themeColor;
  font-size: 16px;
  padding: 0 15px;
  line-height: 30px;
  display: inline-block;
  border-radius: 3px;
}

.plan-attr-title {
  font-size: 28px;
  line-height: 40px;
  max-height: 80px;
  overflow: hidden;
}

.learn-btn {
  a {
    width: 170px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    display: inline-block;
  }
}
</style>